﻿@using WineStore.Models
@model WineStore.Models.ContactUs
@using CaptchaMvc.HtmlHelpers;
@{
    ViewBag.Title = "Contact Us";
    Layout = "~/Views/Shared/HomeLayout.cshtml";
}
<script type="text/javascript">
    $(function () {
        /* For zebra striping */
        $("table tr:nth-child(odd)").addClass("odd-row");
        /* For cell text alignment */
        $("table td:first-child, table th:first-child").addClass("first");
        /* For removing the last border */
        $("table td:last-child, table th:last-child").addClass("last");
    });
</script>
<style type="text/css">
    .contentContact {
        float: left;
        font-size: 13px;
    }

    .stylelocation {
        float: left;
        width: 400px;
        line-height: 10px;
    }

        .stylelocation .descrip {
            padding-left: 20px;
            margin-top: 20px;
            height: 150px;
        }

    .input {
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: 1px solid #DDDDDD;
        width: 250px;
        border-radius: 5px;
        color: #333;
        font-family: Arial;
    }

    .inputTextArea {
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: 1px solid #DDDDDD;
        width: 350px;
        max-width: 350px;
        height: 120px;
        border-radius: 5px;
        font-family: Arial;
        line-height: 1.5em;
    }

        .input:focus, .inputTextArea:focus, .input:hover, .inputTextArea:hover {
            box-shadow: 0 0 5px rgba(81, 203, 238, 1);
            padding: 3px 0px 3px 3px;
            margin: 5px 1px 3px 0px;
            border: 1px solid rgba(81, 203, 238, 1);
        }

    .submit {
        color: white;
        font: 2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
        font-size: 100%;
        padding: 0px;
        background: url(overlay.png) repeat-x center #ffcc00;
        background-color: #009999;
        border: 1px solid #ffcc00;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border-bottom: 1px solid #9f9f9f;
        -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
        cursor: pointer;
        width: 90px;
        height: 25px;
        border: 0;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 3px;
    }

        .submit:hover {
            background-color: #0085cc;
        }

    .formContact {
        float: left;
        width: 520px;
    }

        .formContact td {
            font-size: 13px;
            padding-right: 5px;
        }

    .styleRefresh {
        background: url('../../Content/Images/Logo/refreshicon.jpg') no-repeat;
        width: 50px;
        height: 27px;
        position: absolute;
    }

    .styleValidCap {
        width: 100px;
        position: relative;
    }

    .message {
        color: red;
        margin-top: 650px;
        position: absolute;
        margin-left: 700px;
        font-size: 14px;
    }
</style>

<script src="../../Scripts/jquery-1.8.2.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $("#CaptchaInputText").addClass("input");
        $("#CaptchaImage").attr("width", "150px");

    });
</script>
<div class="center_title_bar">
    <img style="position: relative; top: 3px;" src="../../Content/Images/Home/down_gray.png" />
    Liên hệ</div>

<div class="prod_box_big">

    @*<h3 class="title">Contact</h3>*@
    <div class="contentContact">
        <div class="stylelocation">
            @*@foreach (var item in (IList<Location>)@ViewBag.Locations)
                    {
                        <div class="descrip">@Html.Raw(item.Description_EN)</div>
                    }*@
        </div>
        <div class="formContact">
            @using (Html.BeginForm("ContactUs", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
            { 
                @Html.ValidationSummary(true)
                <div id="contact">
                    <br />
                    <p>
                        <i style="font-size: 13px;">Xin vui lòng gửi tin nhắn cho chúng tôi sử dụng biểu mẫu dưới đây !</i>
                    </p>
                    <br />
                    <table>
                        <tbody>
                            <tr>
                                <td>Họ Tên<span style="color: Red"> (*)</span>
                                </td>
                                <td style="color: Red;">
                                    @Html.TextBoxFor(model => model.FullName, new { @class = "input" })
                                    @Html.ValidationMessageFor(model => model.FullName)
                                </td>

                            </tr>
                            <tr>
                                <td>Số điện thoại<span style="color: Red"> (*)</span>
                                </td>
                                <td style="color: Red;">
                                    @Html.TextBoxFor(model => model.Phone, new { @class = "input" })
                                    @Html.ValidationMessageFor(model => model.Phone)
                                </td>
                            </tr>
                            <tr>
                                <td>Email
                                </td>
                                <td style="color: Red">
                                    @Html.TextBoxFor(model => model.Email, new { @class = "input" })
                                    @Html.ValidationMessageFor(model => model.Email)
                                </td>

                            </tr>
                            <tr>
                                <td>Nội dung<span style="color: Red"> (*)</span>
                                </td>
                                <td style="color: Red;">
                                    @Html.TextAreaFor(model => model.Comment, new { @class = "inputTextArea" })

                                </td>
                                <td style="color: Red;">
                                    @Html.ValidationMessageFor(model => model.Comment)
                                </td>

                            </tr>
                            <tr>
                                @* <td style="vertical-align: middle">Captcha<span style="color: Red"> (*)</span>
                                        </td>*@
                                <td></td>
                                <td style="color: red;">@Html.Captcha("Refresh", "", 5)</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td style="vertical-align: top">
                                    <input type="submit" value="Gửi" style="width: 70px; height: 25px;" class="submit" />
                                </td>
                            </tr>

                            <tr>
                                <td colspan="3">
                                    <br />
                                    <b>Chú ý:</b> Những mục đánh dấu <span style="color: Red">(*)</span>
                                    là bắt buộc.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            
            }
        </div>
    </div>

</div>
